<template>
	<view class="materialInspection" >
		<!-- 物资检查 -->
		<navBar title="物资检查" goBackUrl="/pages/inspection/projectFileList" @goBack="goBack"></navBar>
		<view style="height: 30rpx;background-color: #F5F7FA;" ></view>
		
		<scroll-view scroll-y="true" class="scroll-box">
			<view class="content">
				<view class="nav">
					<view class="nav-item" v-for="(item, index) in typeList" :key="index" :class="{ active: currentIndex === item.type }" @click="getSwitchType(item)">{{ item.name }}</view>
				</view>
				
				<!-- 设备 -->
				<view class="uniCollapse device-collapse"  v-if="currentIndex === 1">
					<uni-collapse class="collapse">
						<uni-collapse-item title-border="show" v-for="(item, idx) in deviceList" :key="idx" :title="item.name">
							<template v-slot:title>
								<view class="collapse-title">
									<view class="left">
										{{ item.name }}
									</view>
									<view class="right">
										{{ item.num }}
									</view>
								</view>
							</template>
							<view class="coll" v-for="(value,key) in item.children" :key="key">
								<view class="coll-item">
									<view class="name">规格型号： </view>
									<view class="value">{{ value.specificationModel }}</view>
								</view>
								<view class="coll-item">
									<view class="name">设备编号： </view>
									<view class="value">{{ value.code }}</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				
				<!-- 材料 -->
				<view class="uniCollapse device-collapse" v-if="currentIndex === 2">
					<uni-collapse class="collapse">
						<uni-collapse-item title-border="show" v-for="(item, index2) in materialList" :key="index2" :title="item.name">
							<template v-slot:title>
								<view class="collapse-title">
									<view class="left">
										{{ item.name }}
									</view>
									<view class="right">
										{{ item.totalNum}}
									</view>
								</view>
							</template>
							<view class="coll" v-for="(value,key) in item.children" :key="key">
								<view class="coll-item">
									<view class="name">规格型号： </view>
									<view class="value">{{ value.specificationModel }}</view>
								</view>
								<view class="coll-item">
									<view class="name">库存： </view>
									<view class="value">{{ value.num }}{{ value.unit }}</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
		</scroll-view>
		
		<view class="footerBtn">
			<u-button class="btn" type="primary" text="物资匹配" @click="submit" :loading="loading"></u-button>
			<u-button class="btn" type="primary" text="物资不匹配" @click="getMatching"></u-button>
		</view>
	</view>
</template>

<script>
	import { getDeviceList, getMaterialList } from "@/api/emergency/emergencyDispatch.js"
	import { getStationMaterialMatch, getProjectUserList } from "@/api/baseManage/baseManage.js"
	
	export default {
		data() {
			return {
				loading: false,
				typeList: [{type: 1, name: "设备"}, {type: 2, name: "材料"}],   // 类型数组
				currentIndex: 1,     // 切换类型
				deviceList: [],
				materialList: [],
				stationId: null,
				stationObj: {},
				siteId: null,
				projectOrgs: []
			}
		},
		onLoad(options) {
			this.stationId = +options.stationId
			this.siteId = +options.siteId
			console.log(options);
		},
		onShow() {
			this.getList()
			this.getStationSite()
			let query={
				currPage: 1,
				pageSize: 100000,
				params:{
					userId: this.$store.getters.userName.id
				}
			}
			getProjectUserList(query).then(res=>{
				let arr = []
				res.result.list.forEach(item=>{
					let obj = {
						projectId: "",    // 业主id
						projectOrgId: "", // 业主组织id
					}
					obj.projectId = item.projectId
					obj.projectOrgId = item.projectOrgId
					arr.push(obj)
				})
				this.projectOrgs = arr
			})
		},
		methods: {
			// 获取设备材料数据
			async getList(){
				let _data = {
					stationIds: [this.stationId]
				}
				let res = await getDeviceList(_data)
				this.deviceList = this.arrayFilter(res.result, "subDeviceTypeName")
				console.log(this.deviceList);
				
				let res2 = await getMaterialList(_data)
				this.materialList = this.arrayFilter(res2.result, "name")
				console.log(this.materialList);
			},
			
			// 切换类型
			getSwitchType(item){
				this.currentIndex = item.type
				// this.getShoppingCartList()
			},
			
			goBack(url){
				uni.navigateBack({
					url: url
				})
			},
			
			// 判断工点有没有绑定基地
			async getStationSite(){
				let res = await getStationGetBySiteId({siteId: this.siteId})
				this.stationObj = res.result || null
				// getStationGetBySiteId
			},
			
			
			
			// 物资匹配
			async submit(){
				if(this.loading) return
				this.loading = true
				
				let data = {
					// ...this.stationObj,
					// projectOrgs: this.projectOrgs,
					id: this.stationId,
					isGoodsMatch: true,
				}
				let res = await getStationMaterialMatch(data)
				if(res.success){
					uni.showToast({
						title: `保存成功`,
						icon: "success"
					})
					setTimeout(()=>{
						this.loading = false
						uni.navigateBack({})
					}, 300)
				}
			},
			
			// 物资不匹配
			getMatching(){
				uni.navigateTo({
					url: `/subpackage-emergency/pages/inspection/materialNoMatching?stationId=${this.stationId || null}`
				})
				
			},
			
			/**
			* @description:  list 数组根据 stationName分组 num统计数量
			* @param {type}  list: 需要处理的数组  (原数组)
			* @param {type}  stationName: 用于判断相同的键名 
			* @return:       返回值: 数组
			*/
			arrayFilter(list, stationName){
				let obj = {}
				let newList = []
				for (let i = 0; i < list.length; i++) {
					let item = list[i]
					let str = item[stationName]
					if(obj[str]){
						obj[str].push(item)
					}else{
						obj[str]=[]
						obj[str].push(item)
					}
				}
				// 对象转数组
				if(stationName === "name"){
					for (let key in obj) {
						let value = obj[key]
						let totalNum = 0
						let unit = ""
						value.forEach(item=>{
							totalNum = totalNum + item.num
							unit = item.unit
						})
						let newkey = {name: key, totalNum:totalNum+unit, children: value}
						newList.push(newkey)
					}
				}else{
					for (let key in obj) {
						let value = obj[key]
						let newkey = {name: key, num:value.length, children: value}
						newList.push(newkey)
					}
				}
				
				return newList
			},
		}
	}
</script>

<style lang="scss" scoped>
	.materialInspection{
		width: 100%;
		max-height: calc(100vh - 95rpx);
		.scroll-box{
			max-height: calc(100vh - 140rpx);
			padding-top: 10rpx;
		}
		.content{
			height: calc(100vh - 270rpx);
		}
		.nav{
			background-color: #fff;
			width: 100%;
			height: 100rpx;
			display: flex;
			.nav-item{
				flex: 1;
				text-align: center;
				font-family: Noto Sans KR-Medium, Noto Sans KR;
				font-weight: 500;
				height: 100%;
				line-height: 100rpx;
				color: #445469;
				font-size: 36rpx;
				border-bottom: 2rpx solid #E2E5ED;
				cursor: pointer;
			}
			.active{
				color: #1abc9c;
				border-bottom: 2rpx solid #1abc9c;
			}
		}
		
		.device-collapse{
			padding: 0rpx 30rpx;
			.coll{
				padding: 0rpx 30rpx;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #E2E5ED;
				.coll-item{
					margin-top: 20rpx;
					display: flex;
					
					.name{
						margin-left: 25rpx;
					}
				}
				.checkbox{
					position: absolute;
					top: 10rpx;
					right: 20rpx;
				}
			}
		}
		.footerBtn{
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 90rpx;
			display: flex;
			.btn{
				width: 48%;
			}
		}
	}
	::v-deep .navBar{
		margin: 0rpx;
		padding-top: 30rpx;
	}
	::v-deep .navBar .left{
		top: 44rpx;
	}
	::v-deep .uniCollapse .collapse-title{
		height: 100rpx;
		line-height: 100rpx;
	}
</style>
<style>
	page{
		height: 100%;
		width: 100%;
	}
	body{
		width: 100%;
		height: 100%;
	}
</style>